<template>
  <div class="bg-white py-24 sm:py-32 w-full flex">
    <div class="mx-auto grid max-w-7xl gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
      <div class="max-w-2xl">
        <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">见识team10团队</h2>
        <p class="mt-6 text-lg leading-8 text-gray-600">领导者的影响力来自于团队的凝聚力，而团队的力量则来自于每个队员的贡献与协作。</p>
      </div>
      <ul role="list" class="grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2">
        <li v-for="person in people" :key="person.name">
          <div class="flex items-center gap-x-6">
            <img class="h-16 w-16 rounded-full" :src="person.imageUrl" alt="" />
            <div>
              <h3 class="text-base font-semibold leading-7 tracking-tight text-gray-900">{{ person.name }}</h3>
              <p class="text-sm font-semibold leading-6 text-indigo-600">{{ person.role }}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
const people = [
  {
    name: '肖欣阳',
    role: '组长',
    imageUrl:
        'https://softer-ware.oss-cn-beijing.aliyuncs.com/xxy.jpg',
  },
  {
    name: '李昉政',
    role: '组员',
    imageUrl:
        'https://softer-ware.oss-cn-beijing.aliyuncs.com/lfz.jpg',
  },
  {
    name: '申雄全',
    role: '组员',
    imageUrl:
        'https://softer-ware.oss-cn-beijing.aliyuncs.com/sxq.jpg',
  },
  {
    name: '闫丰',
    role: '组员',
    imageUrl:
        'https://softer-ware.oss-cn-beijing.aliyuncs.com/yf.jpg',
  },
  {
    name: '王春博',
    role: '组员',
    imageUrl:
        'https://softer-ware.oss-cn-beijing.aliyuncs.com/wcb.jpg',
  },
  // More people...
]
</script>